<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>jQuery选择器</title>
	<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
	<script type="text/javascript">
		$(() => {

			alert('=====')
			$('#btn1').click(() => {
				var $div1 = $('#div1')
				var $div2 = $('#div2')
				$div1.css({ "color": '#090', 'fontSize': '20px' })
				$div2.css({ 'color': '#f099de', 'backgroundColor': '#cc1' })
				$('li').css({ "color": 'red', 'backgroundColor': '#ffccaa' })
				// 获取最后一个li
				$('li:last').css({ "backgroundColor": "#090" })
				$('li').find('a').css({ "fontSize": '100px' })
				$('li').prev().css({ "backgroundColor": '#0f0f0f' })
				$('li').parent().prev().css({ "fontSize": "44px", "color": '#bbaeec' })
			})

		})

	</script>
</head>

<body>
	<div id="div1">视图1</div>

	<div id="div2">视图2</div>

	<button id="btn1">按钮启动!</button>
	<ul>
		<li>1</li>
		<li><a href="www.baidu.com">sssssss</a>2</li>
		<li>3</li>
		<li><a>ppo</a></li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
	</ul>
</body>

</html>